<script setup>

const onWrapperMouseDown = (evt) => {
    evt.target.style.setProperty('--pop-left', evt.offsetX)
    evt.target.style.setProperty('--pop-top', evt.offsetY)
}
</script>

<template>
    <hr class="hr-solid-content" data-content="点击页面出现文字效果">
    <p>点击页面任意位置出现一个向上冒泡的文字</p>
    <div class="wrapper" @mousedown.self="onWrapperMouseDown">
    </div>
</template>

<style scoped>
.wrapper {
    position: relative;
    height: 100%;
    padding: 8px;
    overflow: auto;
}

.wrapper::after {
    content: 'hcxowe';
    position: absolute;
    left: calc(var(--pop-left, -999) * 1px);
    top: calc(var(--pop-top, -999) * 1px);
    color: #fff;
    background-color: #329afc;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -200%);
    transition: opacity .7s, transform .5s;
}

.wrapper:active::after {
    left: -999px;
    opacity: 1;
    transition: none;
    transform: translate(-50%, -100%);
}
</style>